<template>
  <div class="videobottom">
    <ul class="top cl">
      <li class="list_left" @mouseover="scImg" @mouseout="shrink">
        <div class="list_left_top fl"></div>
        <div class="list_left_Lbottom fl"></div>
        <div class="list_left_Rbottom fr"></div>
      </li>
      <li class="list_center">
        <div class="tit_left">
          <h2>国际赛事</h2>
        </div>
        <div class="tit_item">
          <div class="tit_list" v-for="el in listLeft" :key="el.id" @mouseover="meiRongleft(el.id)">
            <div class="tit_list_biaoti" v-if="el.id!==neirongleft">{{el.title}}</div>
            <div class="tit_list_content" v-if="el.id===neirongleft"></div>
          </div>
        </div>
      </li>
      <li class="list_bottom">
        <div class="tit_left">
          <h2>高校城市联赛</h2>
        </div>
        <div class="tit_item">
          <div
            class="tit_list"
            v-for="el in listRight"
            :key="el.id"
            @mouseover="meiRongright(el.id)"
          >
            <div class="tit_list_biaoti" v-if="el.id!==neirongright">{{el.title}}</div>
            <div class="tit_list_content" v-if="el.id===neirongright"></div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data: () => ({
    listLeft: [
      {
        id: 0,
        title: 'LCS全新成员官宣 邪恶天才EG再度归来',
        content: '1内容'
      },
      {
        id: 1,
        title: 'FNC获得S9晋级资格 远古四大AD独差Pray',
        content: '2内容'
      },
      {
        id: 2,
        title: 'Deft拼命Carry却止步S9门口 LCK新老交替略显悲壮',
        content: '3内容'
      },
      {
        id: 3,
        title: 'KZ轻取SBG进入下一轮 Deft离S9只有一步之遥',
        content: '4内容'
      },
      {
        id: 4,
        title: '让一追三，一穿三完成三分之一！KZ打懵AF，用行动回应质疑',
        content: '5内容'
      },
      {
        id: 5,
        title: '管泽元毒奶再奏效 G2让二追三挺进决赛',
        content: '6内容'
      }
    ],
    listRight: [
      {
        id: 0,
        title: '第八届英雄联盟全国高校联赛海选赛火热进行中',
        content: '1内容'
      },
      {
        id: 1,
        title: '2019京东杯英雄联盟全国网吧联赛总决赛观众招募中！',
        content: '2内容'
      },
      {
        id: 2,
        title: '第八届英雄联盟全国高校联赛开幕！',
        content: '3内容'
      },
      {
        id: 3,
        title: '第八届英雄联盟全国高校联赛即将开启',
        content: '4内容'
      },
      {
        id: 4,
        title: '集美大学让一追二收获高校联赛冠军',
        content: '5内容'
      },
      {
        id: 5,
        title: '第七届英雄联盟全国高校联赛 吃喝玩乐篇',
        content: '6内容'
      }
    ],
    neirongleft: 0,
    neirongright: 0
  }),
  created () {},
  methods: {
    scImg (evt) {
      var e = evt || window.event
      var ele = e.target || e.srcElement
      if (ele.nodeName === 'DIV') {
        ele.id = 'scimg'
      }
    },
    shrink (evt) {
      var e = evt || window.event
      var ele = e.target || e.srcElement
      if (ele.nodeName === 'DIV') {
        ele.id = 'shrink'
      }
    },
    meiRongleft (id) {
      this.neirongleft = id
    },
    meiRongright (id) {
      this.neirongright = id
    }
  }
}
</script>
<style lang="less" scoped>
.videobottom {
  width: 100%;
  background: #f7f7f7;
  .top {
    width: 1360px;
    margin: auto;
    // background: #f00;
    margin-top: 50px;
    li {
      height: 340px;
      width: 440px;
      // background: #ff0;
      float: left;
    }
    .list_left {
      .list_left_top {
        height: 170px;
        width: 100%;
        background: url("https://shp.qpic.cn/cfwebcap/0/ac5178149b02f627e7464bbbc2715e2f/0/")
          no-repeat;
        background-size: 100% 100%;
        //  background-position:center;
      }
      .list_left_Lbottom,
      .list_left_Rbottom {
        height: 162px;
        width: 216px;
        background-size: 100% 100%;
        margin-top: 8px;
        background-position: center;
      }
      .list_left_Lbottom {
        background: url("https://shp.qpic.cn/cfwebcap/0/e285704351ed5b2fe5889cc2dcdafd32/0/")
          no-repeat;
      }
      .list_left_Rbottom {
        background: url("https://shp.qpic.cn/cfwebcap/0/15f9aa19edeb9e1d04df02f90484ad18/0/")
          no-repeat;
      }
      #scimg {
        background-size: 110% 110% !important;
        background-position: center;
      }
      #shrink {
        background-size: 100% 100% !important;
        background-position: center;
      }
    }
    .list_center {
      margin: 0px 20px;
      .tit_left {
        text-align: left;
        padding-bottom: 18px;
        border-bottom: 1px solid #ccc;
        h2 {
          padding-left: 10px;
          border-left: solid #1da6ba 5px;
        }
      }
      .tit_item {
        height: 100%;
        width: 100%;
        .tit_list_biaoti {
          border-bottom: 1px solid #ccc;
          height: 39px;
          // background: #00f;
          width: 100%;
          text-align: left;
        }
        .tit_list_content {
          display: block;
          height: 96px;
          padding: 12px 5px 12px 0;
          width: 100%;
          box-sizing: border-box;
          // background: #f0f;
          width: 100%;
          line-height: 39px;
          border-bottom: 1px solid #e6e8e8;
           background: url("../../images/lanbu.png");
            background-size:100% 100%;
        }
      }
    }
    .list_bottom {
      text-align: left;
      .tit_list_biaoti {
        border-bottom: 1px solid #ccc;
        height: 39px;
        // background: #00f;
        width: 100%;
      }
      .tit_list_content {
        display: block;
        height: 96px;
        padding: 12px 5px 12px 0;
        width: 100%;
        box-sizing: border-box;
        // background: #f0f;
        width: 100%;
        line-height: 39px;
        border-bottom: 1px solid #e6e8e8;
             background: url("../../images/lanbu1.png");
            background-size:100% 100%;
      }
      .tit_left {
        text-align: left;
        padding-bottom: 18px;
        border-bottom: 1px solid #ccc;
        h2 {
          padding-left: 10px;
          border-left: solid #1da6ba 5px;
        }
      }
    }
  }
}
</style>
